<template>
    <div class="main">
        <div style="width: 3vw;"></div>

        <div style="color:#ffffff;font-size: 1.5vw;font-weight: 400;">
            民兵管理平台
        </div>
        <div style="width: 3vw;"></div>
        <div style="width: 3vw;">
            <i class="el-icon-s-unfold" style="font-size: 3.8vh; 
            font-weight: 500;cursor: pointer;background-color: rgb(255, 255, 255);"
                v-if="this.$store.state.homex.openJudge" @click="changeBool"></i>
            <i class="el-icon-s-fold" style="font-size: 3.8vh;
             font-weight: 500;cursor: pointer;background-color: rgb(255, 255, 255);"
                v-if="!this.$store.state.homex.openJudge" @click="changeBool"></i>
        </div>

        <div style="width: 64vw;">

        </div>
        <!-- <img src="https://ecmb.bdimg.com/tam-ogel/-440932281_-336120762_88_88.png"
            style="position: relative;border-radius: 100%;height: 5.3vh;width:5.3vh;
            cursor: pointer;background-color: rgb(255, 255, 255)" @click="opGitee()"> -->
        <div style="width: 3vw;"></div>
        <el-dropdown>
            <span class="el-dropdown-link">
                <img :src="getUserImageFilePathQiNiuYun(userInformation.user_header)" v-if="userInformation.comploImg"
                    style="position: relative;border-radius: 100%;height: 6.1vh;width: 6.2vh;background-color: rgb(255, 255, 255);cursor: pointer;">
                <img :src="getStaticFilePathJAVA('noheaderimage.jpeg')" v-else
                    style="position: relative;border-radius: 100%;height: 6.1vh;width: 6.2vh;background-color: rgb(255, 255, 255);cursor: pointer;">
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item icon="el-icon-user" @click.native="skip('/myInformation')">个人中心
                    </el-dropdown-item>
                    <el-dropdown-item icon="el-icon-s-custom" @click.native="changeRoles()">切换职位
                    </el-dropdown-item>
                    <el-dropdown-item icon="el-icon-close" @click.native="closeAll">退出</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>

        <div style="width: 3vw;">

        </div>





        <el-dialog title="选则我的职务" :visible.sync="dialogVisible" width="30%">
            <span>你的职务</span>
            <div style="position: relative;height: 2vh;"></div>
            <el-radio v-for="(item, index) in list" :key="index" v-model="radio" :label="item.role_id">{{ item.roleName
            }}</el-radio>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisibleJudge()">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>
  
<script>
import getStorage from '@/utils/getStorage'
import router from '@/router/index'
import myInformationApi from '@/api/userzRequest.js'
import RoleAndRoleApi from '@/api/userzandrolezRequest.js'

export default {
    // 组件名称
    name: 'upHome',
    // 组件参数 接收来自父组件的数据
    props: {},
    // 局部注册的组件
    components: {},
    // 组件状态值
    data() {
        return {
            userInformation: {},
            //存放查询的值
            list: [],
            //用户ID
            id: 0,
            dialogVisible: false,
            //存放选则的职务
            radio: 0,
        }
    },
    // 计算属性
    computed: {},
    // 侦听器
    watch: {

    },
    // 组件方法
    methods: {
        changeBool() {
            this.$store.commit("homex/BOOLCHANGE");
        },
        //去个人中心
        skip(paths) {
            this.$router.push({
                path: `${paths}`,
            });
        },
        // 切换角色
        changeRoles() {
            this.radio = getStorage.getroleId();
            this.id = getStorage.getAxiosUserId();
            //在创建vue实例后触发初始化钩子函数
            this.fetchData();
        },
        //退出
        closeAll() {
            getStorage.flushUser();
            alert('退出登录')
            this.$router.push({
                path: `/`,
            });
        },
        //通过id查询个人中心
        selectUserInformation() {
            let UserIDX = getStorage.getAxiosUserId();
            myInformationApi.selectByUser_idMyself(UserIDX).then(res => {
                this.userInformation = res.data;
            })
        },
        //查询角色数量
        fetchData() {
            // 编写一个方法请求后端的接口，把返回的数据赋值list
            RoleAndRoleApi.selectUserRole(this.id).then(response => {
                //把返回的结果赋值模型        
                this.list = response.data;
                this.dialogVisible = true;
            })
        },
        //选则职务
        dialogVisibleJudge() {
            getStorage.insertroleId(this.radio);
            router.replace({
                path: `/Home`,
            });
            location.reload();
        }
        //打开开源仓库
        // opGitee(){

        //    window.open('https://gitee.com/alibate/saas_web')
        // }
    },

    // 以下是生命周期钩子   注：没用到的钩子请自行删除
    /**
    * 在实例初始化之后，组件属性计算之前，如data属性等
    */
    beforeCreate() {

    },
    /**
    * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
    */
    created() {
        this.selectUserInformation();
    },
    /**
    * 在挂载开始之前被调用：相关的 render 函数首次被调用。
    */
    beforeMount() {
    },
    /**
    * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
    * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
    */
    mounted() {


    },
    /**
    * 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
    * 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
    */
    beforeUpdate() {
    },
    /**
    * 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
    * 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
    */
    updated() {
    },
    /**
    * keep-alive 组件激活时调用。 仅针对keep-alive 组件有效
    */
    activated() {
    },
    /**
    * keep-alive 组件停用时调用。 仅针对keep-alive 组件有效
    */
    deactivated() {
    },
    /**
    * 实例销毁之前调用。在这一步，实例仍然完全可用。
    */
    beforeDestroy() {
    },
    /**
    * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
    * 所有的事件监听器会被移除，所有的子实例也会被销毁。
    */
    destroyed() {
    }
}

</script> 
  
  
<style  scoped >
.main {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}
</style>